<template>
  <div class="menu">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
            class="el-menu-vertical-demo copy">
          <el-menu-item>
            <router-link to="/home" @click="clickFontColor($event)" :num="1">{{menuList[0]}}</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/recruit" @click="clickFontColor($event)" :num="2">{{menuList[1]}}</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/cultivate" @click="clickFontColor($event)" :num="3">{{menuList[2]}}</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/Materials" @click="clickFontColor($event)" :num="4">{{menuList[3]}}</router-link>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getStore, setStore } from "../untils/storage";
import {mapMutations, mapState} from 'vuex'

export default {
  name: "HeaderMenu",
  data() {
    return {
      menuList: [
        "干员分布",
        "招募规则",
        "材料计算",
        "材料总览"
      ]
    }
  },
  mounted() {
    this.activePage();
  },
  methods: {
    ...mapMutations(['roleDisplay']),
    // 菜单标色当前页面对应的选项
    activePage() {
      if (getStore("active")) {
        let numlist = document.querySelectorAll('.el-menu-item');
        numlist[getStore("active")-1].lastElementChild.style.color = "#409EFF";
      }
    },
    // 点击菜单动画颜色
    clickFontColor(event) {
      // event.currentTarget.parentElement.lastElementChild.style.color = "#303133";
      let numlist = document.querySelectorAll('.el-menu-item');
      let len = numlist.length;
      for(let i = 0; i < len; i++) {
        numlist[i].lastElementChild.style.color = "#f0f0f0";    // 获取所有点击元素的相同属性元素，统一颜色
      }
      event.currentTarget.style.color = "#409EFF";    // 获取点击元素，修改字体色彩
      let a = event.currentTarget.getAttribute('num');
      setStore('active' , a);
      if(a == 1 && this.roleShow) {
        this.roleDisplay();     // 从干员列表返回地图
      }
    },
  },
  computed: {
    ...mapState(['roleShow']),
  }
}

</script>

<style lang="scss" scoped>
@import "../assets/style/common";

@keyframes example {
  0%   {transform: translateX(0px);}
  100% {transform: translateX(-25px);}
}

.menu {
  position: absolute;
  right: 5%;
  top: 10%;
  z-index: 99;
  .tac {
    .el-menu {
      border: none;
      background-color: rgba(#7fffd4, 0%);
      .el-menu-item {
        background: none;
        font-weight: bold;
        margin: 50px 0;
        a {
          display: inline-block;
          height: 60px;
          color: #f0f0f0;
          font-size: 16x;
          letter-spacing: 1px;
        }
        i {
          display: inline-block;
          width: 5px;
          height: 24px;
        }
      }
      .el-menu-item:hover {
        //transform: translateX(-20px);
        animation: example 0.5s forwards;
        i {
          background: #409EFF;
        }
      }
    }
  }
}
</style>